<template>
    <div class="page">
        <nut-input label="标题" input-align="right" v-model="content.title" placeholder="请输入标题" />
        <nut-input label="时间" input-align="right" v-model="content.time" disabled />
        <button @click="save">保存</button>
        <div class="stepBox">
            <nut-steps direction="vertical" :current="current" progress-dot @click-step="clickStep">
                <nut-step :title="i.title" v-for="i in content.stepArr" v-if="content.stepArr.length > 0">
                    <template v-slot:content>
                        <component :is="i.component"></component>
                        <nut-icon name="del" size="24" @click="delComponent(i.id)"></nut-icon>
                    </template>
                </nut-step>
            </nut-steps>
            <btmTool @insertCom="insertCom" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getCurrentDate } from "@/tool/basic"
import textTpl from "./components/text-tpl.vue"
import imgTpl from "./components/img-tpl.vue"
import btmTool from "./components/btm-tool.vue";
import { reactive, ref, shallowRef, watch, toRefs, markRaw } from "vue"
const componentMap: Record<string, object> = {
    'textTpl': textTpl,
    'imgTpl': imgTpl
}
interface Content {
    title: string,
    time: string,
    stepArr: Step[]
}
interface Step {
    id: number,
    title: string,
    component: object,

}
//步骤条当前位置
const current = ref<number>(0)
//内容
const content = reactive<Content>({
    title: "",
    time: getCurrentDate(),
    stepArr: []
})
watch(()=>content.stepArr, (val)=>{
    current.value=val.length //hz
})
//插入图片或者文本 
const insertCom = (e: string) => {
    const component = componentMap[e]
    if (!component) {
        console.error(`No component found for '${e}'`);
        return;
    }
    content.stepArr.push({
        id: Date.now(),
        title: e,
        component: shallowRef(component)
    })
}
//删除节点
const delComponent = (e: number) => {
    content.stepArr = content.stepArr.filter(i => i.id != e)
}
//点击节点
const clickStep = (e: number) => {
    current.value = e
}
const save=()=>{
    console.log('🚀🚀',content.stepArr);
}

</script>

<style lang="scss" scoped>
.page {
    background: $common-lgc;
    height: 100vh;
    box-sizing: border-box;
    padding: 32px;
}

.stepBox {
    height: 75vh;
    overflow-y: scroll;
}

:deep(.nut-step-main) {
    position: relative;
    width: 100%;

    .nut-icon {
        position: absolute;
        right: 0px;
        top: 50%;
    }
}

:deep(.nut-step-line) {
    background: $common-bgc !important;
    transform: translateX(-50%);
}

:deep(.nut-step-icon) {
    background-color: $common-bgc !important;
}

:deep(.nut-step-icon:before) {
    background-color: $common-lblue !important;
    opacity: 1 !important;
}

:deep(.nut-steps-vertical) {
    height: auto;
}

:deep(.nut-step-content),
:deep(.nut-step-title) {
    width: 90%;
}
</style>
